<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="login-title">爱吃兔溯源系统</h2>
      <el-form label-width="auto" class="login-form">
        <el-form-item label="账号">
          <el-input v-model="login.accountName" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="login.accountPass" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLogin" class="login-button">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useCounterStore } from "@/stores/counter"
const Store = useCounterStore()
const router = useRouter();
const login = reactive({
  accountName: '',
  accountPass: ''
});

const getLogin = () => {
  axios.post('http://localhost:5114/api/Managerment/LoginAccount', login).then(res => {
    if (res.data.code == 300) {
      ElMessage({
        message: '登陆成功',
        type: 'success',
      });
      Store.accountcounter.accountId = res.data.data.accountId
      Store.accountcounter.accountNickName = res.data.data.accountNickName
      Store.accountcounter.accountName = res.data.data.accountName
      Store.accountcounter.roleName = res.data.data.roleName
      router.push({
        name: 'Source'
      })
    } else {
      ElMessage({
        message: res.data.message,
        type: 'error',
      });
    }
  });
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
  /* 背景颜色与主内容区一致 */
}

.login-box {
  width: 100%;
  max-width: 500px;
  /* 登录框宽度 */
  padding: 60px;
  /* 增加内边距 */
  background-color: #ffffff;
  /* 白色背景 */
  border-radius: 8px;
  /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* 轻微阴影 */
}

.login-title {
  text-align: center;
  margin-bottom: 40px;
  /* 增加标题与表单的间距 */
  font-size: 32px;
  /* 放大标题字体 */
  font-weight: bold;
  color: #409EFF;
  /* 品牌色 */
  line-height: 1.5;
  /* 增加行高 */
}

.login-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 32px;
  /* 增加表单项之间的间距 */
}

.el-form-item__label {
  font-size: 18px;
  /* 放大表单项标签字体 */
  color: #333;
  /* 标签字体颜色 */
}

.el-input {
  width: 100%;
  font-size: 18px;
  /* 放大输入框字体 */
  height: 48px;
  /* 增加输入框高度 */
}

.el-input ::placeholder {
  font-size: 16px;
  /* 放大 placeholder 字体 */
  color: #999;
  /* placeholder 颜色 */
}

.login-button {
  width: 100%;
  margin-top: 24px;
  /* 增加按钮与输入框的间距 */
  font-size: 18px;
  /* 放大按钮字体 */
  padding: 16px 0;
  /* 增加按钮内边距 */
  font-weight: bold;
  /* 按钮字体加粗 */
  height: 48px;
  /* 增加按钮高度 */
}
</style>